<template>
    <baseComponents>
        <el-row>
            <el-breadcrumb separator="/" style="margin-bottom: 10px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ name: sight }">红色景点</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row>
            <div>
                <el-select v-model="cityChoose" class="m-2" placeholder="Select" size="large" @change="handleChange"
                    clearable>
                    <el-option v-for="item in city" :key="item" :label="item" :value="item" />
                </el-select>
                <el-select v-model="countyChoose" class="m-2" placeholder="Select" size="large" v-if="check" clearable>
                    <el-option v-for="item in county" :key="item" :label="item" :value="item" />
                </el-select>
            </div>
        </el-row>
        <el-row>
            <el-col :span="19">
                <tagMainArticleComponents :title="title" :address="address" />
            </el-col>
            <el-col :span="5">
                <slideTagComponents :tag="title" />
            </el-col>
        </el-row>
    </baseComponents>
</template>

<script>
import baseComponents from '@/components/global/baseComponents.vue';
import tagMainArticleComponents from '../../components/tag/tagMainArticleComponents.vue';
import slideTagComponents from '@/components/tag/slideTagComponents.vue';
import { computed, ref, watch } from 'vue';
export default {
    name: "sightView",
    components: {
        baseComponents,
        tagMainArticleComponents,
        slideTagComponents,
    },
    provide() {
        return {
            'address': computed(() => { return this.cityChoose + this.countyChoose })
            //computed(() => { return "南昌市青山湖区" })
        }
    },
    setup() {
        let title = "红色景点";
        let city = ref(["南昌市", "九江市", "赣州市", "上饶市", "抚州市", "宜春市", "吉安市", "景德镇市", "萍乡市", "新余市", "鹰潭市"])
        let county = ref([]);
        let cityChoose = ref('');
        let countyChoose = ref('');

        let check = ref(false);

        let isAddress = ref(false);
        let handleChange = () => {
            isAddress.value = true;
            switch (cityChoose.value) {
                case '南昌市':
                    county.value = ["东湖区", "西湖区", "青云谱区", "青山湖区", "湾里区", "新建区", "南昌县", "进贤县", "安义县"];
                    check.value = false;
                    check.value = true;
                    countyChoose.value = '';
                    break;
                case "九江市":
                    county.value = ["浔阳区", "濂溪区", "柴桑区", '瑞昌市', "共青城市", "庐山市", "修水县", "武宁县", '永修县', "德安县", "都昌县", "湖口县", "彭泽县"];
                    check.value = false;
                    check.value = true;
                    countyChoose.value = '';
                    break;
                case "赣州市":
                    county.value = ["赣县区", "章贡区", "南康区", "龙南市", "瑞金市", "信丰县", "大余县", "上犹县", "崇义县", "安远县", "龙南县", "定南县", "全南县", "宁都县", "于都县", "会昌县", "寻乌县", "兴国县"];
                    check.value = false;
                    check.value = true;
                    countyChoose.value = '';
                    break;
                case "上饶市":
                    county.value = ["信州区", "广信区", "广丰区", "玉山县", "铅山县", "横峰县", "弋阳县", "余干县", "鄱阳县", "万年县", "婺源县", "德兴市"];
                    check.value = false;
                    check.value = true;
                    countyChoose.value = '';
                    break;
                case "抚州市":
                    county.value = ["临川区", "东乡区", "南城县", "南丰县", "崇仁县", '乐安县', '金溪县', "黎川县", "宜黄县", "资溪县", "广昌县"];
                    check.value = false;
                    check.value = true;
                    countyChoose.value = '';
                    break;
                case "宜春市":
                    county.value = ["袁州区", "丰城市", '樟树市', "高安市", "奉新县", "万载县", "上高县", "宜丰县", '靖安县', "铜鼓县"];
                    check.value = false;
                    check.value = true;
                    countyChoose.value = '';
                    break;
                case "吉安市":
                    county.value = ["吉州区", "青原区", "井冈山市", "吉安县", "泰和县", "万安县", "遂川县", "永新县", "永丰县", "吉水县", "峡江县", "安福县", "新干县"];
                    check.value = false;
                    check.value = true;
                    countyChoose.value = '';
                    break;
                case "萍乡市":
                    county.value = ["安源区", "湘东区", "芦溪县", "上栗县", "莲花县",];
                    check.value = false;
                    check.value = true;
                    countyChoose.value = '';
                    break;
                case "新余市":
                    county.value = ["分宜县", "渝水区"];
                    check.value = false;
                    check.value = true;
                    countyChoose.value = '';
                    break;
                case "鹰潭市":
                    county.value = ["贵溪市", "余江区", "月湖区"];
                    check.value = false;
                    check.value = true;
                    countyChoose.value = '';
                    break;
                case "":
                    county.value = [];
                    check.value = false;
                    countyChoose.value = '';
                    break;
            }
        }
        watch(cityChoose.value, () => {
            if (cityChoose.value == "")
                county.value = [];
        })
        let address = ref('');


        return {
            isAddress,
            check,
            address,
            handleChange,
            cityChoose,
            countyChoose,
            title,
            city,
            county,
        }
    }
}

</script>


<style scoped>
.el-select {
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>